<template>
  <!--图标样式-->
  <link
    rel="stylesheet"
    type="text/css"
    href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css"
  />

  <!--布局框架-->
  <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

  <!--主要样式-->
  <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />

  <div class="limiter">
    <div
      class="container-login100"
      style="background-image: url('/assets/images/img-01.jpg')"
    >
      <div class="wrap-login100 p-t-190 p-b-30">
        <van-form @submit="register" class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
          </div>

          <span class="login100-form-title p-t-20 p-b-45"></span>

          <van-field
            v-model="business.mobile"
            name="mobile"
            label="手机号码"
            placeholder="手机号码"
            required
            left-icon="phone"
            :rules="[
              { required: true, message: '请填写手机号码' },
              { pattern: /^1[3,5,6,7,8,9]\d{9}$/, message: '手机号码格式不正确'}
              ]"
          />

          <van-field
            v-model="business.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            required
            left-icon="lock"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <div class="container-login100-form-btn p-t-10">
            <van-button round block type="primary" native-type="submit" color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)">
              注册
            </van-button>
          </div>

          <div class="text-center w-full p-t-25 p-b-230"></div>

          <div class="text-center w-full">
            <router-link class="txt1" href="index.html#" to="/business/login">
              立即登录
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup>
// 获取类似于vue2的对象
// import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();

const business = ref({
  mobile: '13888888888',
  password: '',
});

const register = async(values)=>{
  var result = await proxy.$POST({
    url:'business/register',
    params:business.value
  })

  if(result.code == 0){
    proxy.$fail(result.msg)
    return false
  }

  //成功，提醒并跳转
  proxy.$success({
    message:result.msg,
    duration:1000,
    onClose:()=>{
      proxy.$router.push(result.url)
      return false
    }

  })

}
</script>